<!--
 * @Descripttion: 首页框架
 * @Author: YuZhenJing
 * @Date: 2020-01-01 13:01:36
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-05-18 10:05:47
 -->
<template>
  <div class="home">
    <el-container>
      <el-header height="56px">
        <a-header :menuIsNull="menuIsNull"></a-header>
      </el-header>

      <el-container>
        <el-aside :style="homeStyle.aside" v-if="menuIsNull === false">
          <nav-menu :navData="navMenu" :default-active="$route.path" :active-color="navActiveColor"></nav-menu>
        </el-aside>
        <el-main>
          <router-view class="router-animation"></router-view>
          <div id="in-core"></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  components: {
    'a-header': require('@/components/home/Header').default
  },
  data() {
    return {
      navActiveColor: '',
      menuIsNull: true,
      navMenu: [
        {
          funListCode: 'homeCode',
          funListName: '首页',
          funListIcon: 'el-icon-s-home',
          funListUrl: '/dashboard'
        }
      ]
    }
  },
  created() {
    this.userInfo = this.$auth.userInfo.get()
    const tempMenuData = this.$auth.menuInfo.get()
    if (tempMenuData && tempMenuData.length !== 0) {
      this.menuIsNull = false
      tempMenuData.map(item => {
        this.navMenu.push(item)
      })
    }
    if (window.asm.theme.themeObj.primary) {
      this.navActiveColor = window.asm.theme.themeObj.primary
    }
  },
  computed: {
    ...mapState('login', ['showMenu', 'theme', 'menuInfo']),
    homeStyle() {
      return {
        aside: {
          background: '#f2f2f2',
          width: this.showMenu ? '210px' : '0px',
          transition: 'width 0.28s',
          overflow: 'hidden',
          borderRight: '1px solid #EBEEF5'
        }
      }
    },
    isCollapse() {
      return !this.showMenu
    }
  },
  mounted() {
    let _this = this
    window.onresize = () => {
      return (() => {
        if (_this.showMenu == true) {
          this.screenWidth = document.body.clientWidth
          if (this.screenWidth <= 866) {
            _this.$store.commit('login/SET_SHOWMENU', false)
          }
        }
      })()
    }
  }
}
</script>
<style lang="stylus" scoped>
.home
  position relative
  height 100%
  width 100%
  .el-aside
    -webkit-touch-callout none /* iOS Safari */
    -webkit-user-select none /* Chrome/Safari/Opera */
    -khtml-user-select none /* Konqueror */
    -moz-user-select none /* Firefox */
    -ms-user-select none /* Internet Explorer/Edge */
    user-select none /* Non-prefixed version, currently not supported by any browser */
.el-main
  background-color #fff
  padding 10px
  height calc(100vh - 56px)
</style>
